<template>
  <div class="table-container">
    <div class="table-nav">
      <div class="header-title">{{ headerTitle }}</div>
      <div class="tool-bar-render">
        <slot name="toolBarRender"></slot>
      </div>
      <div class="header-right">
        <el-tooltip effect="dark" content="刷新" placement="top">
          <i
            class="el-icon-refresh-right tooltip-item"
            @click="onRefreshClick"
          ></i>
        </el-tooltip>
        <el-dropdown>
          <el-tooltip effect="dark" content="尺寸" placement="top">
            <i class="el-icon-rank tooltip-item"></i>
          </el-tooltip>
          <el-dropdown-menu slot="dropdown" tabindex="2">
            <el-dropdown-item @click.native="onSizeClick(0)">
              <span v-if="activeSize === 0" style="color: #409eff">默认</span>
              <span v-if="activeSize !== 0">默认</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="onSizeClick(1)">
              <span v-if="activeSize === 1" style="color: #409eff">中等</span>
              <span v-if="activeSize !== 1">中等</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="onSizeClick(2)">
              <span v-if="activeSize === 2" style="color: #409eff">紧凑</span>
              <span v-if="activeSize !== 2">紧凑</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown :hide-on-click="false">
          <span>
            <el-tooltip effect="dark" content="列设置" placement="top">
              <i class="el-icon-setting tooltip-item"></i>
            </el-tooltip>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div class="column-all-setting">
              <div>
                <el-checkbox v-model="allColumn" @change="onAllColumnChange">
                  列展示
                </el-checkbox>
              </div>
              <div class="reset-btn" @click="onResetClick">重置</div>
            </div>
            <el-dropdown-item
              v-for="(item, index) in currentColumns"
              :key="index"
            >
              <el-checkbox
                :value="item.checked"
                class="checkbox-item"
                @change="onItemColumnChange(index)"
              >
                {{ item.title }}
              </el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-table
      ref="table"
      v-loading="listLoading"
      element-loading-text="Loading"
      :data="listData"
      :border="currentOptions.border"
      :fit="currentOptions.fit"
      :size="currentOptions.size"
      :highlight-current-row="currentOptions.highlightCurrentRow"
      @selection-change="handleSelectionChange"
    >
      <slot name="selection"></slot>
      <el-table-column
        v-for="(item, index) in columnsList"
        :key="index"
        :label="item.title"
        :min-width="item.minWidth"
        :align="item.align"
      >
        <template slot-scope="scope">
          <div v-if="item.dataIndex">{{ scope.row[item.dataIndex] }}</div>
          <div v-else-if="item.tagType">
            <el-tag :size="currentOptions.size" :type="item.tagType(scope.row)">
              {{ item.formatter(scope.row) }}
            </el-tag>
          </div>
          <div v-else-if="item.formatter">{{ item.formatter(scope.row) }}</div>
          <div v-else-if="item.scope">
            <slot
              :name="item.scope"
              :size="currentOptions.size"
              :row="scope.row"
            ></slot>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
    <pagination
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.pageSize"
      @pagination="getpaginationList"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'SortTable',
  components: { Pagination },
  props: {
    headerTitle: {
      //表格名称
      type: String,
      default: '',
    },
    options: {
      //基础配置
      type: Object,
      default: () => {
        return {
          border: true,
          fit: true,
          highlightCurrentRow: true,
        }
      },
    },
    columns: {
      //列
      type: Array,
      default: () => [],
    },
    listLoading: {
      //加载进度框
      type: Boolean,
      default: false,
    },
    listData: {
      //列表数据
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    listQuery: {
      type: Object,
      default: () => {
        return {
          current: 1, //当前第几页
          pageSize: 10,
        }
      },
    },
  },
  data() {
    return {
      currentOptions: {
        ...this.options,
        size: this.options.size ? this.options.size : 'medium',
      },
      activeSize: 0,
      //列设置
      allColumn: true,
    }
  },
  computed: {
    columnsList() {
      return this.columns.filter((item) => item.checked)
    },
    currentColumns: {
      get() {
        return this.columns
      },
      set(val) {
        this.$emit('update:columns', val)
      },
    },
  },
  created() {
    this.columns.forEach((item) => {
      item.checked = true
    })
  },
  methods: {
    onRefreshClick() {
      this.$emit('onRefreshClick', true)
    },
    onSizeClick(index) {
      this.activeSize = index
      switch (index) {
        case 0:
          this.currentOptions = {
            ...this.currentOptions,
            size: 'medium',
          }
          break
        case 1:
          this.currentOptions = {
            ...this.currentOptions,
            size: 'small',
          }
          break
        case 2:
          this.currentOptions = {
            ...this.currentOptions,
            size: 'mini',
          }
          break
      }
    },
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    // 列设置
    onAllColumnChange() {
      this.currentColumns.forEach((item) => {
        item.checked = this.allColumn
      })
      this.currentColumns = [...this.currentColumns]
    },
    onResetClick() {
      this.allColumn = true
      this.onAllColumnChange()
    },
    onItemColumnChange(index) {
      this.currentColumns[index].checked = !this.currentColumns[index].checked
      this.currentColumns = [...this.currentColumns]
      let isAllChecked = true
      this.currentColumns.forEach((item) => {
        if (!item.checked) {
          isAllChecked = false
        }
      })
      this.allColumn = isAllChecked
    },
    getpaginationList() {
      this.$emit('getpaginationList', this.listQuery)
    },
  },
}
</script>
<style lang="scss" scoped>
.table-container {
  .table-nav {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
    .header-title {
      font-size: 14px;
      color: #666;
    }
    .tool-bar-render {
      flex: 1;
      text-align: right;
    }
    .header-right {
      i {
        font-size: 18px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .tooltip-item:hover {
      color: #409eff;
    }
  }
}
</style>
<style lang="scss">
.column-all-setting {
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-top: 5px;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  .reset-btn {
    margin-left: 50px;
    cursor: pointer;
    font-size: 14px;
    color: #409eff;
  }
}
.checkbox-item {
  width: 100%;
  padding-left: 20px;
}
</style>
